<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<head>
	<title>Order</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="/css/home/style.css" rel="stylesheet" type="text/css" media="all"/>
	<link rel="stylesheet" href="/css/home/div-pop-up.css" media="all">
	<link rel="stylesheet" type="text/css" href="/css/home/starability-grow.css"/>
	<script type="text/javascript" src="/js/common/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="/js/home/move-top.js"></script>
	<script type="text/javascript" src="/js/home/easing.js"></script>
</head>
<body>
  <div class="wrap">
	<div class="header">
		<div class="headertop_desc">
			<div class="call">
				<p><span>客服电话:</span><span class="number">188-1412-7570</span></p>
			</div>
			<div class="account_desc">
				<ul>
					<li><a href="#">Register</a></li>
					<li><a href="#">Login</a></li>
					<li><a href="#">Delivery</a></li>
					<li><a href="#">Checkout</a></li>
					<li><a href="#">My Account</a></li>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		<div class="header_top">
			<div class="logo">
				<a href="/home/item.action?userId=${User.userId}&item=home"><img src="/images/icon/logo.png" alt="" /></a>
			</div>
			  <div class="cart">
					   <a href="/home/item.action?userId=${User.userId}&item=cart"><input type="button" class="input-button" value="去购物车结算"></a>
			  </div>
			  <script type="text/javascript">
			function DropDown(el) {
				this.dd = el;
				this.initEvents();
			}
			DropDown.prototype = {
				initEvents : function() {
					var obj = this;

					obj.dd.on('click', function(event){
						$(this).toggleClass('active');
						event.stopPropagation();
					});	
				}
			}

			$(function() {

				var dd = new DropDown( $('#dd') );

				$(document).click(function() {
					// all dropdowns
					$('.wrapper-dropdown-2').removeClass('active');
				});

			});

		</script>
	 <div class="clear"></div>
  </div>
	<div class="header_bottom">
	     	<div class="menu">
	     		<ul>
					<li id="go_home"><a href="/home/item.action?userId=${User.userId}&item=home">主页</a></li>
					<li id="go_cart"><a href="/home/item.action?userId=${User.userId}&item=cart">购物车</a></li>
					<li class="active" id="go_order"><a href="/home/item.action?userId=${User.userId}&item=order">我的订单</a></li>
					<li id="go_collection"><a href="/home/item.action?userId=${User.userId}&item=collection">我的收藏</a></li>
					<li id="go_info"><a href="/home/item.action?userId=${User.userId}&item=info">个人信息</a></li>
					<li id="go_address"><a href="/home/item.action?userId=${User.userId}&item=address">收货地址</a></li>
					<li id="go_complaint"><a href="/home/item.action?userId=${User.userId}&item=complaint">投诉</a></li>
					<li id="go_suggest"><a href="/home/item.action?userId=${User.userId}&item=suggest">建议</a></li>
					<li id="go_about"><a href="/home/item.action?userId=${User.userId}&item=about">关于</a></li>
			    	<div class="clear"></div>
     			</ul>
	     	</div>
	     	<div class="search_box">
	     		<form>
	     			<input type="text" value="Search" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search';}"><input type="button" value="搜索">
	     		</form>
	     	</div>
	     	<div class="clear"></div>
	     </div>	     	
   </div>
 <div class="main">
    <div class="content">
    	<div class="section group">
				  <div class="">
					  </br>
				  	<h2>我的订单</h2>
					  <div class="order-container">
						  </br>
                          <div class="cart-header">
                              <input class="cart-header-item" type="text" value="图片" style="width: 250px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="商品" style="width: 280px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="数量" style="width: 100px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="单价" style="width: 100px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="小计" style="width: 100px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="状态" style="width: 100px" readonly="readonly">
                              <input class="cart-header-item" type="text" value="操作" style="width: 60px" readonly="readonly">
                          </div>
						  <c:forEach items="${OrderGoodsList}" var="goods" varStatus="loop">
						  <div class="cart-model">
							  <div class="cart-model-image">
								  <a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank"><img src="${goods.goodsImage}" alt="" height="50px" width="50px" /></a>
							  </div>
							  <div class="cart-model-info" style="width: 400px;">
								  <h5 style="margin-bottom: 10px">${goods.description}</h5>
								  <h3><a href="/home/goodsDetail.action?goodsId=${goods.goodsId}&userId=${User.userId}" target="_blank">${goods.name}</a></h3>
							  </div>
                              <div class="cart-model-num" style="margin-left: 525px">
                                  <a class="cart-num-change"> - </a>
                                  <input id="cart-num-${OrderList[loop.index].orderId}" class="cart-goods-num" type="text" value="${OrderList[loop.index].goodsNum}" minnum="1" readonly>
                                  <a class="cart-num-change"> + </a>
                              </div>
							  <div class="cart-model-price" style="margin-left: 645px">
								  <input id="cart-price-${OrderList[loop.index].orderId}" class="cart-price-style" type="text" value="￥${goods.price}" readonly="readonly">
							  </div>
							  <div class="cart-model-subtotal" style="margin-left: 740px">
								  <input id="cart-subtotal-${OrderList[loop.index].orderId}" class="cart-subtotal-style" type="text" value="￥${OrderList[loop.index].finalTotalFee}" readonly="readonly">
							  </div>
							  <div class="cart-model-subtotal" style="margin-left: 850px">
								  <input id="cart-subtotal-${OrderList[loop.index].orderId}" class="cart-subtotal-style status" type="text" value="${OrderList[loop.index].status}" readonly="readonly">
							  </div>
							  <div class="cart-model-remove">
								  <input id="evaluate-${OrderList[loop.index].orderId}" type="button" class="myButton evaluate" value="评价" onclick="comment(${OrderList[loop.index].orderId})">
							  </div>
						  </div>
                              <br>
						  </c:forEach>
						  </br>
						  </br>
					  </div>

					  <div class="theme-popover">
						  <div class="theme-poptit">
							  <a href="javascript:;" title="关闭" class="close">×</a>
							  <h3>商品评价</h3>
						  </div>
						  <section>
							  <div class="starability-container">
								  <h3>商品打星</h3>
								  <br>
								  <form>
									  <fieldset class="starability-grow" style="position:absolute;left: 50%;margin-left: -75px">

										  <input type="radio" id="rate5-3" name="rating" value="5" />
										  <label for="rate5-3" title="Amazing">5 stars</label>

										  <input type="radio" id="rate4-3" name="rating" value="4" />
										  <label for="rate4-3" title="Very good">4 stars</label>

										  <input type="radio" id="rate3-3" name="rating" value="3" />
										  <label for="rate3-3" title="Average">3 stars</label>

										  <input type="radio" id="rate2-3" name="rating" value="2" />
										  <label for="rate2-3" title="Not good">2 stars</label>

										  <input type="radio" id="rate1-3" name="rating" value="1" />
										  <label for="rate1-3" title="Terrible">1 star</label>
									  </fieldset>
								  </form>
							  </div>
						  </section>

						  <div class="theme-popbod dform">
							  <form class="theme-signin" name="loginform" action="" method="post">
								  <ol>
									  <li><h2>评价</h2></li>
									  <li><textarea id="comment-content" style="width: 200px;height: 80px;" placeholder="你的评价"></textarea></li>
									  <li><input id="comment-submit" class="myButton" type="button" value=" 提 交 " style="margin-left: -30px"/></li>
								  </ol>
							  </form>
						  </div>
					  </div>
					  <div class="theme-popover-mask"></div>

				  </div>
			  </div>
         </div> 
    </div>
 </div>
   <div class="footer">
   	  <div class="wrap">	
	     <div class="section group">
				<div class="col_1_of_4 span_1_of_4">
						<h4>Information</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Advanced Search</a></li>
						<li><a href="delivery.html">Orders and Returns</a></li>
						<li><a href="contact.html">Contact Us</a></li>
						</ul>
					</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Why buy from us</h4>
						<ul>
						<li><a href="about.html">About Us</a></li>
						<li><a href="contact.html">Customer Service</a></li>
						<li><a href="#">Privacy Policy</a></li>
						<li><a href="contact.html">Site Map</a></li>
						<li><a href="#">Search Terms</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>My account</h4>
						<ul>
							<li><a href="contact.html">Sign In</a></li>
							<li><a href="index.html">View Cart</a></li>
							<li><a href="#">My Wishlist</a></li>
							<li><a href="#">Track My Order</a></li>
							<li><a href="contact.html">Help</a></li>
						</ul>
				</div>
				<div class="col_1_of_4 span_1_of_4">
					<h4>Contact</h4>
						<ul>
							<li><span>+91-123-456789</span></li>
							<li><span>+00-123-000000</span></li>
						</ul>
						<div class="social-icons">
							<h4>Follow Us</h4>
					   		  <ul>
							      <li><a href="#" target="_blank"><img src="/images/icon/facebook.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/twitter.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"><img src="/images/icon/skype.png" alt="" /> </a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/dribbble.png" alt="" /></a></li>
							      <li><a href="#" target="_blank"> <img src="/images/icon/linkedin.png" alt="" /></a></li>
							      <div class="clear"></div>
						     </ul>
   	 					</div>
				</div>
			</div>			
        </div>
    </div>
    <script type="text/javascript">
		function goPay() {
            for(var i=0;i<$(".cart-model").length;i++){
                if($(".cart-model").eq(i).find(".select-goods").is(':checked')){
                    //数量可能有更改，重新更新购物车
					var idArr = $(".cart-model").eq(i).find(".select-goods").attr("id").split("-");
					var totalFeeArr = $(".cart-model").eq(i).find(".cart-subtotal-style").val().split("￥");
					var id = idArr[1];
					var num = $(".cart-model").eq(i).find(".cart-goods-num").val();
					var totalFee = totalFeeArr[1];
					$.ajax({
					    url:"/module/updateCart.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            id:id,
                            goodsNum:num,
                            totalFee:totalFee
                        },
						success:function (data) {
							if(data.status == "update_cart_failed"){
							    alert("更新购物车失败");
							}
                        },
						error:function (e) {
                            alert("发送更新购物车请求错误："+e);
                        }
					});
                }else{
                    //移除未选中的购物车
                    var idArr = $(".cart-model").eq(i).find(".select-goods").attr("id").split("-");
					var id = idArr[1];
                    $.ajax({
                        url:"/module/removeCart.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            id:id
                        },
                        success:function (data) {
                            if(data.status == "remove_cart_succeed"){
                            }else if(data.status == "remove_cart_failed"){
                                alert("移除购物车失败");
                            }
                        },
                        error:function (e) {
                            alert("发送移除购物车请求错误："+e);
                        }
                    });
				}
            }
			//跳到确认订单页面

            window.location.href = "/home/goOrder.action?userId=${User.userId}";
        }

        function countTotalPrice() {
		    var sum = 0;
		    for(var i=0;i<$(".cart-model").length;i++){
		        if($(".cart-model").eq(i).find(".select-goods").is(':checked')){
		            var val =  $(".cart-model").eq(i).find(".cart-subtotal-style").val();
		            var arr = val.split("￥");
		            sum += Number(arr[1]);
				}
			}
			$("#total-price").text("￥"+sum);
        }
		function comment(id) {
		    if($("#evaluate-"+id).is(".evaluate")){
				$('.theme-popover-mask').fadeIn(100);
				$('.theme-popover').slideDown(200);
                $('.theme-poptit .close').click(function(){
                    $('.theme-popover-mask').fadeOut(100);
                    $('.theme-popover').slideUp(200);
                });
                var star = 0;
                $("#comment-submit").on("click",function () {
                    $("#evaluate-"+id).removeClass("evaluate");
                    $("#evaluate-"+id).css("background","#9C9C9C");
					$("input[type='radio']").each(function () {
						var id = $(this).attr("id");
						if($("#"+id).is(":checked")){
						    star = $("#"+id).val();
						}
                    });
					var content = $("#comment-content").val();
                    $('.theme-popover-mask').fadeOut(100);
                    $('.theme-popover').slideUp(200);
                    $.ajax({
                        url:"/module/comment.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            star:star,
                            content:content,
							orderId:id
                        },
                        success:function (data) {
                            if(data.status == "comment_succeed"){
                                alert("评论成功");
                            }else if(data.status == "comment_failed"){
                                alert("评论失败");
                            }else if(data.status == "had_comment"){
                                alert("你已评论过该商品，请勿重复评论");
							}
                        },
                        error:function (e) {
                            alert("发送评论请求错误："+e);
                        }
					});
                });
			}
        }
        function deleteAddress(id) {
            $.ajax({
                url:"/module/deleteAddress.action",
                type:"post",
                dataType:"json",
                data:{
                    id:id
                },
                success:function (data) {
                    if(data.status == "delete_address_succeed"){
                        alert("删除成功");
                        window.location.href = "/home/item.action?userId=${User.userId}&item=address";
                    }else if(data.status == "delete_address_failed"){
                        alert("删除地址失败");
                    }
                },
                error:function (e) {
                    alert("发送删除地址请求错误："+e);
                }
            });
        }
		$(document).ready(function() {
		    countTotalPrice();
			$().UItoTop({ easingType: 'easeOutQuart' });

            $("#confirm").on("click",function () {
                var name = $("#name").val();
                var phone = $("#phone").val();
                var address = $("#address").val();
                var code = $("#code").val();
                if(name == ""){
                    $(".name-tip").text("收货人姓名不能为空！请输入");
                    $(".name-tip").css("color","#FF3030");
                }else if(phone == ""){
                    $(".phone-tip").text("联系电话不能为空！请输入");
                    $(".phone-tip").css("color","#FF3030");
                }else if(address == ""){
                    $(".address-tip").text("收货地址不能为空！请输入");
                    $(".address-tip").css("color","#FF3030");
                }else if(code == ""){
                    $(".code-tip").text("邮政编码不能为空！请输入");
                    $(".code-tip").css("color","#FF3030");
                }else{
                    $.ajax({
                        url:"/module/addAddress.action",
                        type:"post",
                        dataType:"json",
                        data:{
                            name:name,
                            phone:phone,
                            address:address,
                            code:code,
                            userId:${User.userId}
                        },
                        success:function (data) {
                            if(data.status == "add_address_succeed"){
                                alert("添加成功");
                                window.location.href = "/home/item.action?userId=${User.userId}&item=address";
                            }else if(data.status == "add_address_failed"){
                                alert("添加失败");
                            }
                        },
                        error:function (e) {
                            alert("发送添加请求失败："+e);
                        }
                    });
                }
            });
            for(var i=0;i<$(".cart-model").length;i++){
                if($(".cart-model").eq(i).find(".status").val() != "支付成功"){
                    $(".cart-model").eq(i).find(".myButton").removeClass("evaluate");
                    $(".cart-model").eq(i).find(".myButton").css("background","#9C9C9C");
                }
            }
		});
	</script>
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
<%--<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>--%>
</body>
</html>

